<template>
  <el-card>
    <el-table border :data="skuList" v-loading="loading">
      <el-table-column
        label="序号"
        type="index"
        align="center"
        width="80px"
      ></el-table-column>
      <el-table-column label="名称" prop="skuName"></el-table-column>
      <el-table-column label="描述" prop="skuDesc"></el-table-column>
      <el-table-column label="默认图片">
        <template v-slot="{ row }">
          <img
            :src="row.skuDefaultImg"
            :alt="row.skuName"
            style="width: 100px; height: 100px"
          />
        </template>
      </el-table-column>
      <el-table-column label="重量(KG)" prop="weight"></el-table-column>
      <el-table-column label="价格(元)" prop="price"></el-table-column>
      <el-table-column label="操作" width="280px">
        <template v-slot="{ row, $index }">
          <el-tooltip content="上架" placement="top" v-if="row.isSale === 0">
            <el-button
              type="success"
              :icon="Top"
              size="small"
              @click="setOnSale(row)"
            ></el-button>
          </el-tooltip>
          <el-tooltip content="下架" placement="top" v-else>
            <el-button
              type="danger"
              :icon="Bottom"
              size="small"
              @click="cancelSale(row)"
            ></el-button>
          </el-tooltip>
          <el-tooltip content="修改SKU" placement="top">
            <el-button type="primary" :icon="Edit" size="small"></el-button>
          </el-tooltip>
          <el-tooltip content="查看详情" placement="top">
            <el-button
              type="info"
              :icon="InfoFilled"
              size="small"
              @click="getSkuInfo(row.id)"
            ></el-button>
          </el-tooltip>
          <el-tooltip content="删除SKU" placement="top">
            <el-button
              type="danger"
              :icon="Delete"
              size="small"
              @click="deleteSkuInfo(row.id)"
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      v-model:currentPage="page"
      v-model:page-size="limit"
      :page-sizes="[5, 10, 15, 20]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout=" prev, pager, next, jumper,->,sizes,total,"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 抽屉效果 -->
    <el-drawer
      v-model="drawer"
      title="查看Sku详情"
      :direction="direction"
      size="40%"
    >
      <el-row :gutter="10" style="margin-bottom: 10px">
        <el-col :span="7">
          <div>名称</div>
        </el-col>
        <el-col :span="17">
          <div>{{ skuInfo.skuName }}</div>
        </el-col>
      </el-row>
      <el-row :gutter="10" style="margin-bottom: 10px">
        <el-col :span="7">
          <div>描述</div>
        </el-col>
        <el-col :span="17">
          <div>{{ skuInfo.skuDesc }}</div>
        </el-col>
      </el-row>
      <el-row :gutter="10" style="margin-bottom: 10px">
        <el-col :span="7">
          <div>价格</div>
        </el-col>
        <el-col :span="17">
          <div>{{ skuInfo.price }}</div>
        </el-col>
      </el-row>
      <el-row :gutter="10" style="margin-bottom: 10px">
        <el-col :span="7">
          <div>平台属性</div>
        </el-col>
        <el-col :span="17">
          <el-tag
            style="margin-right: 10px"
            v-for="attrValue in skuInfo.skuAttrValueList"
            :key="attrValue.id"
            >{{ attrValue.valueName }}</el-tag
          >
        </el-col>
      </el-row>
      <el-row :gutter="10" style="margin-bottom: 10px">
        <el-col :span="7">
          <div>销售属性</div>
        </el-col>
        <el-col :span="17">
          <el-tag
            style="margin-right: 10px"
            v-for="saleAttrValue in skuInfo.skuSaleAttrValueList"
            :key="saleAttrValue.id"
            >{{ saleAttrValue.saleAttrValueName }}</el-tag
          >
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="7">
          <div>商品图片</div>
        </el-col>
        <el-col :span="17">
          <el-carousel height="400px">
            <el-carousel-item
              v-for="item in skuInfo.skuImageList"
              :key="item.id"
            >
              <el-image :src="item.imgUrl" :alt="item.imgName" style="width:80%"/>
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
    </el-drawer>
  </el-card>
</template>

<script lang="ts">
export default {
  name: 'Sku',
}
</script>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { Delete, Edit, InfoFilled, Top, Bottom } from '@element-plus/icons-vue'
import {
  reqGetAllSkuList,
  reqSkuOnSale,
  reqSkuCancleSale,
  reqDeleteSkuInfo,
  reqGetOneSkuInfo,
} from '@/api/product/sku'
import { ElMessage } from 'element-plus'
const page = ref(1)
const limit = ref(5)
const total = ref(1)
const loading = ref(false)
const skuList = ref([])
const skuInfo = ref({})

// 抽屉效果参数
const drawer = ref(false)
const direction = ref('rtl')

// 分页参数
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const getAllSkuList = async () => {
  loading.value = true
  const result = await reqGetAllSkuList(page.value, limit.value)
  skuList.value = result.records
  total.value = result.total
  loading.value = false
}
onMounted(() => {
  getAllSkuList()
})

const handleSizeChange = (val: number) => {
  limit.value = val
  getAllSkuList()
}
const handleCurrentChange = (val: number) => {
  page.value = val
  getAllSkuList()
}

// 设置sku上架
const setOnSale = async (row) => {
  await reqSkuOnSale(row.id)
  row.isSale = 1
  ElMessage.success('sku上架成功')
}

// 设置sku下架
const cancelSale = async (row) => {
  await reqSkuCancleSale(row.id)
  row.isSale = 0
  ElMessage.success('sku下架成功')
}

// 删除sku
const deleteSkuInfo = async (skuId: number) => {
  await reqDeleteSkuInfo(skuId)
  getAllSkuList()
}

// 查看sku详情
const getSkuInfo = async (id: number) => {
  const result = await reqGetOneSkuInfo(id)
  console.log('drawer', result)
  drawer.value = true
  skuInfo.value = result
}
</script>

<style></style>
